<?php
// 成功案例详情组件
$configKey = isset($configKey) ? $configKey : 'case-info';
// 案例数据
$info = [
    'id' => '1',
    'title' => '金融科技移动应用',
    'client' => '领先金融科技公司',
    'industry' => '金融科技',
    'description' => '我们与合作，开发了一款安全可靠的移动支付应用，旨在为用户提供便捷、安全的金融交易体验。该应用支持多种金融服务，包括在线支付、转账、投资管理等功能，满足了用户在移动设备上进行复杂金融操作的需求。',
    'platforms' => 'iOS & Android',
    'project_type' => '移动应用开发',
    'project_duration' => '6个月',
    'team_size' => '8人团队',
    'image' => 'https://picsum.photos/seed/fintech/1200/800',
    'image_alt' => '金融科技移动应用界面',
    'hero_image' => 'https://picsum.photos/seed/fintech-hero/1920/800',
    'hero_image_alt' => '金融科技移动应用展示',
    'challenges' => [
        'title' => '面临的挑战',
        'description' => '项目开发过程中遇到了多个技术和业务挑战，我们通过创新的解决方案和专业的技术能力成功克服了这些困难。',
        'content' => [
            '需要安全可靠的移动支付解决方案',
            '支持复杂金融交易与实时数据更新',
            '确保用户数据隐私和交易安全',
            '提供流畅的用户体验和高性能',
            '满足严格的金融行业监管要求'
        ]
    ],
    'solutions' => [
        'title' => '解决方案',
        'description' => '我们采用原生开发方案，结合高级加密技术，确保了移动支付应用的安全与性能。同时，我们实现了高效的数据同步机制，使用户能够实时查看和更新交易信息。',
        'content' => [
            '采用原生开发方案，结合高级加密技术',
            '实现高效数据同步机制，确保安全与性能',
            '使用多层安全架构，包括生物识别认证',
            '建立实时交易监控系统，预防欺诈行为',
            '优化用户界面，提供直观操作体验'
        ]
    ],
    'results' => [
        'title' => '结果与影响',
        'description' => '通过我们的专业服务，项目取得了显著的业务成果和技术突破，为客户创造了实际价值。',
        'content' => [
            '用户量' => '120万+',
            '日均交易' => '5万+',
            '应用评分' => '4.9/5',
            '崩溃率' => '0.3%',
            '转化率提升' => '45%',
            '用户留存率' => '78%',
            '交易处理时间' => '平均2秒',
            '安全审计通过率' => '100%'
        ]
    ],
    'testimonial' => [
        'quote' => '这个移动支付解决方案彻底改变了我们的业务运营方式。它不仅安全可靠，而且提供了卓越的用户体验，帮助我们迅速扩大了市场份额。',
        'author' => '张总监',
        'position' => '技术副总裁',
        'company' => '领先金融科技公司',
        'avatar' => 'https://picsum.photos/seed/testimonial1/100/100'
    ],
    'process' => [
        'title' => '项目开发流程',
        'description' => '我们采用系统化的开发流程，确保项目按时高质量交付，同时充分满足客户需求。',
        'content' => [
            [
                'step' => '需求分析',
                'description' => '深入了解客户需求和业务目标，进行全面的市场调研和竞品分析',
                'icon' => 'fa-search'
            ],
            [
                'step' => '架构设计',
                'description' => '设计安全可靠的系统架构，包括前端界面和后端服务',
                'icon' => 'fa-sitemap'
            ],
            [
                'step' => '原型开发',
                'description' => '创建交互式原型，验证用户流程和功能设计',
                'icon' => 'fa-pencil-square-o'
            ],
            [
                'step' => '开发实施',
                'description' => '进行原生应用开发，实现所有核心功能和安全机制',
                'icon' => 'fa-code'
            ],
            [
                'step' => '测试验证',
                'description' => '进行全面的功能测试、性能测试和安全测试',
                'icon' => 'fa-check-square-o'
            ],
            [
                'step' => '部署上线',
                'description' => '应用商店发布和持续监控',
                'icon' => 'fa-rocket'
            ]
        ]
    ],
    'technologies' => [
        'iOS开发' => 'Swift',
        'Android开发' => 'Kotlin',
        '后端服务' => 'Node.js, Express',
        '数据库' => 'MongoDB, Redis',
        '安全框架' => 'OWASP Mobile Security',
        '支付处理' => '自定义加密支付系统',
        '云服务' => 'AWS'
    ],
    'gallery' => [
        [
            'image' => 'https://picsum.photos/seed/fintech1/800/600',
            'alt' => '应用界面截图1'
        ],
        [
            'image' => 'https://picsum.photos/seed/fintech2/800/600',
            'alt' => '应用界面截图2'
        ],
        [
            'image' => 'https://picsum.photos/seed/fintech3/800/600',
            'alt' => '应用界面截图3'
        ],
        [
            'image' => 'https://picsum.photos/seed/fintech4/800/600',
            'alt' => '应用界面截图4'
        ]
    ]
];

// 页面文本配置
$texts = [
    'project_overview_title' => '项目概览',
    'view_results_button' => '查看项目成果',
    'technologies_title' => '技术栈',
    'technologies_desc' => '我们使用先进的技术栈，确保应用的性能、安全性和可扩展性。',
    'gallery_title' => '案例图库',
    'gallery_desc' => '浏览项目的关键界面和功能展示。',
    'contact_title' => '对我们的服务感兴趣？',
    'contact_desc' => '无论您是需要类似的项目开发，还是有其他定制需求，我们的专业团队都能为您提供优质的解决方案。',
    'contact_button' => '联系我们',
    'project_type_label' => '项目类型',
    'team_size_label' => '团队规模',
    'industry_label' => '行业',
    'platform_label' => '平台'
];

// 默认配置
$defaultConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '案例研究',
    'section_title' => '成功案例详情',
    'section_subtitle' => '显示案例完整信息',
    'info' => $info,
    'texts' => $texts
];

// 获取传入配置
$customConfig = isset($config) ? $config : [];

// 合并配置
$data = array_merge($defaultConfig, $customConfig);
?>
<!-- 项目概览 -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:flex items-center gap-12">
            <div class="lg:w-1/2 mb-8 lg:mb-0">
                <img 
                    src="<?= htmlspecialchars($info['image']); ?>" 
                    alt="<?= htmlspecialchars($info['image_alt']); ?>"
                    class="rounded-xl shadow-xl w-full h-auto object-cover transform hover:scale-105 transition-transform duration-500"
                    loading="lazy"
                >
            </div>
            <div class="lg:w-1/2">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6"><?= htmlspecialchars($data['texts']['project_overview_title']); ?></h2>
                <p class="text-gray-700 mb-6 text-lg leading-relaxed">
                    <?= htmlspecialchars($info['description']); ?>
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-500 mb-1"><?= htmlspecialchars($data['texts']['project_type_label']); ?></h3>
                        <p class="font-medium text-gray-900"><?= htmlspecialchars($info['project_type']); ?></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-500 mb-1"><?= htmlspecialchars($data['texts']['team_size_label']); ?></h3>
                        <p class="font-medium text-gray-900"><?= htmlspecialchars($info['team_size']); ?></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-500 mb-1"><?= htmlspecialchars($data['texts']['industry_label']); ?></h3>
                        <p class="font-medium text-gray-900"><?= htmlspecialchars($info['industry']); ?></p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-500 mb-1"><?= htmlspecialchars($data['texts']['platform_label']); ?></h3>
                        <p class="font-medium text-gray-900"><?= htmlspecialchars($info['platforms']); ?></p>
                    </div>
                </div>
                <a href="#results" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-300">
                    <?= htmlspecialchars($data['texts']['view_results_button']); ?>
                    <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 挑战与解决方案 -->
<section class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4"><?= htmlspecialchars($info['challenges']['title']); ?></h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                <?= htmlspecialchars($info['challenges']['description']); ?>
            </p>
        </div>

        <div class="lg:flex gap-12">
            <!-- 挑战 -->
            <div class="lg:w-1/2 mb-12 lg:mb-0">
                <div class="bg-white rounded-xl shadow-sm p-8 h-full">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
                            <i class="fa fa-exclamation-triangle text-red-600 text-xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900"><?= htmlspecialchars($info['challenges']['title']); ?></h3>
                    </div>
                    <ul class="space-y-4">
                        <?php foreach ($info['challenges']['content'] as $index => $challenge): ?>
                            <li class="flex items-start">
                                <span class="flex-shrink-0 w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center font-semibold mr-3 mt-0.5">
                                    <?= $index + 1; ?>
                                </span>
                                <span class="text-gray-700"><?= htmlspecialchars($challenge); ?></span>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>

            <!-- 解决方案 -->
            <div class="lg:w-1/2">
                <div class="bg-white rounded-xl shadow-sm p-8 h-full">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
                            <i class="fa fa-lightbulb-o text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900"><?= htmlspecialchars($info['solutions']['title']); ?></h3>
                    </div>
                    <ul class="space-y-4">
                        <?php foreach ($info['solutions']['content'] as $index => $solution): ?>
                            <li class="flex items-start">
                                <span class="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center font-semibold mr-3 mt-0.5">
                                    <?= $index + 1; ?>
                                </span>
                                <span class="text-gray-700"><?= htmlspecialchars($solution); ?></span>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 项目成果 -->
<section id="results" class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4"><?= htmlspecialchars($info['results']['title']); ?></h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                <?= htmlspecialchars($info['results']['description']); ?>
            </p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php foreach ($info['results']['content'] as $metric => $value): ?>
                <div class="p-6 rounded-xl text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="text-3xl md:text-4xl font-bold text-blue-600 mb-2 animate-counter">
                        <?= htmlspecialchars($value); ?>
                    </div>
                    <p class="text-gray-700 font-medium"><?= htmlspecialchars($metric); ?></p>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- 客户评价 -->
        <div class="mt-16 rounded-2xl p-8 md:p-12">
            <div class="max-w-4xl mx-auto">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/4 mb-6 md:mb-0 md:pr-8">
                        <img 
                            src="<?= htmlspecialchars($info['testimonial']['avatar']); ?>" 
                            alt="<?= htmlspecialchars($info['testimonial']['author']); ?>"
                            class="w-24 h-24 rounded-full object-cover mx-auto md:mx-0 border-4 border-white shadow-lg"
                        >
                    </div>
                    <div class="md:w-3/4">
                        <div class="text-blue-600 mb-4">
                            <i class="fa fa-quote-left text-4xl opacity-30"></i>
                        </div>
                        <p class="text-xl md:text-2xl font-medium text-gray-800 italic mb-6 leading-relaxed">
                            "<?= htmlspecialchars($info['testimonial']['quote']); ?>"
                        </p>
                        <div>
                            <h4 class="font-bold text-gray-900">
                                <?= htmlspecialchars($info['testimonial']['author']); ?>
                            </h4>
                            <p class="text-gray-600">
                                <?= htmlspecialchars($info['testimonial']['position']); ?>, 
                                <?= htmlspecialchars($info['testimonial']['company']); ?>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 开发流程 -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4"><?= htmlspecialchars($info['process']['title']); ?></h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                <?= htmlspecialchars($info['process']['description']); ?>
            </p>
        </div>

        <div class="relative">
            <!-- 流程时间线 -->
            <div class="hidden lg:block absolute left-1/2 top-0 bottom-0 w-1 bg-blue-200 transform -translate-x-1/2"></div>

            <div class="space-y-12">
                <?php foreach ($info['process']['content'] as $index => $step): ?>
                    <div class="lg:flex items-center">
                        <div class="hidden lg:block w-1/2 <?= $index % 2 === 0 ? 'text-right pr-12' : 'text-left pl-12 order-2'; ?>">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">
                                <?= htmlspecialchars($step['step']); ?>
                            </h3>
                            <p class="text-gray-700">
                                <?= htmlspecialchars($step['description']); ?>
                            </p>
                        </div>
                        
                        <!-- 时间线节点 -->
                        <div class="lg:flex-shrink-0 flex justify-center mb-4 lg:mb-0">
                            <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center z-10 shadow-lg">
                                <i class="fa <?= htmlspecialchars($step['icon']); ?> text-2xl"></i>
                            </div>
                        </div>
                        
                        <div class="lg:w-1/2 <?= $index % 2 === 0 ? 'text-left pl-12 order-2' : 'text-right pr-12'; ?>">
                            <h3 class="text-xl font-bold text-gray-900 mb-2 lg:hidden">
                                <?= htmlspecialchars($step['step']); ?>
                            </h3>
                            <p class="text-gray-700 lg:hidden">
                                <?= htmlspecialchars($step['description']); ?>
                            </p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<!-- 技术栈 -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4"><?= htmlspecialchars($data['texts']['technologies_title']); ?></h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                <?= htmlspecialchars($data['texts']['technologies_desc']); ?>
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <?php foreach ($info['technologies'] as $category => $tech): ?>
                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow duration-300">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3"><?= htmlspecialchars($category); ?></h3>
                    <p class="text-blue-600 font-medium"><?= htmlspecialchars($tech); ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- 案例图库 -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4"><?= htmlspecialchars($data['texts']['gallery_title']); ?></h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                <?= htmlspecialchars($data['texts']['gallery_desc']); ?>
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <?php foreach ($info['gallery'] as $image): ?>
                <div class="rounded-xl overflow-hidden shadow-md group">
                    <img 
                        src="<?= htmlspecialchars($image['image']); ?>" 
                        alt="<?= htmlspecialchars($image['alt']); ?>"
                        class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500"
                        loading="lazy"
                    >
                    <div class="p-4 bg-white">
                        <p class="text-gray-700 font-medium"><?= htmlspecialchars($image['alt']); ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- 联系咨询 -->
<section class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-3xl font-bold mb-4"><?= htmlspecialchars($data['texts']['contact_title']); ?></h2>
            <p class="text-xl text-blue-100 mb-8">
                <?= htmlspecialchars($data['texts']['contact_desc']); ?>
            </p>
            <a href="/contact" class="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-bold rounded-lg hover:bg-blue-50 transition-colors duration-300 text-lg">
                <?= htmlspecialchars($data['texts']['contact_button']); ?>
                <i class="fa fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>
